import ProForm, {
  DrawerForm,
  ProFormRadio,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-form';
import { Divider, Typography } from 'antd';
import Link from 'antd/es/typography/Link';
import 'dayjs/locale/zh-cn';

import React from 'react';

interface EditTaskDouyinProps {
  task: PromotionTaskBo.TaskBo;
  onRefurbish: (task: PromotionTaskBo.TaskBo) => void;
}

const EditTaskDouyin: React.FC<EditTaskDouyinProps> = ({ task: editTask, onRefurbish }) => {
  const config = {
    logo: 'assets/promotion_icon_douyin.png',
    type: 3,
    typeName: '抖音',
  };

  return (
    <DrawerForm
      key="edit_promotion_task_drawer_form_douyin"
      title={
        <div
          style={{
            display: 'flex',
          }}
        >
          <img
            width={22.4}
            style={{
              margin: 'auto 2px',
            }}
            src={config.logo}
          />
          编辑任务 - {config.typeName}
        </div>
      }
      drawerProps={{
        maskClosable: false,
        destroyOnClose: true,
      }}
      trigger={<a>编辑</a>}
      onValuesChange={(visible: boolean) => {}}
      initialValues={{
        name: editTask.name,
        route: editTask.route,
        remarks: editTask.remarks,
        isDemandClipboard: editTask.isDemandClipboard,
      }}
      onFinish={async (values) => {
        let task = { ...values } as PromotionTaskBo.TaskBo;
        task.id = editTask.id;
        task.type = 3;
        task.typeName = config.typeName;
        task.logo = config.logo;

        onRefurbish(task);
        return true;
      }}
    >
      <ProForm.Group title={'任务内容'}>
        <ProFormText
          width="xl"
          name="name"
          label="标题"
          rules={[{ required: true, message: '请输入标题' }]}
          fieldProps={{
            allowClear: true,
            maxLength: 200,
          }}
        />

        <ProFormTextArea
          width="xl"
          name="route"
          label="分享口令和链接"
          fieldProps={{
            allowClear: true,
            rows: 3,
            maxLength: 5000,
          }}
          rules={[{ required: true, message: '请输入分享口令和链接' }]}
        />
        <Typography.Paragraph>
          获取分享口令和链接需要登录
          <Link target="_blank" href="https://www.douyin.com/">
            抖音
          </Link>
          ，在视频窗口右侧分享按钮弹窗中复制。
        </Typography.Paragraph>
      </ProForm.Group>
      <Divider />
      <ProForm.Group title={'任务要求'}>
        <ProFormRadio.Group
          name="isDemandClipboard"
          label="是否复制到剪贴板"
          options={[
            {
              label: '是',
              value: 1,
            },
            {
              label: '否',
              value: 0,
            },
          ]}
        />
      </ProForm.Group>
      <Divider />
      <ProForm.Group title={'其他'}>
        <ProFormTextArea
          width="xl"
          name="remarks"
          label="备注"
          fieldProps={{
            allowClear: true,
            rows: 3,
            maxLength: 200,
          }}
        />
      </ProForm.Group>
    </DrawerForm>
  );
};
export default EditTaskDouyin;
